在vue中怎么使用echarts实现一个简单的饼图 |
您所在的位置：网站首页 › vue 引用echarts横道图上下均匀排布 › 在vue中怎么使用echarts实现一个简单的饼图 |
在vue中怎么使用echarts实现一个简单的饼图
|
首先echarts官网链接https://echarts.apache.org/zh/index.html 我的视线效果，以及为饼图增加了点击事件，点击弹出一个提示框
下载： 我用npm install echarts --save这个命令没下载下来 ；我就选择了直接下载文件-》 我是选择了在线定制，因为我主要需要的是一个饼图；所以定制会小一点； 下载出来是一个echarts.min.js文件，将这个文件拖至你的项目目录；
第二步 在main.js文件内全局引入echarts，并赋予Vue的原型$echarts import echarts from './tools/echarts.min.js'; Vue.prototype.$echarts = echarts;第三步 在你需要使用echarts的vue文件内的html部分给写一个dom元素来 可以规定其大小 第三步 初始化及写点击事件， 在标签里面可以写方法： mounted(){ this.draw(); }, methods: { draw(){ this.myChart = this.$echarts.init(document.getElementById('main')) // 指定图表的配置项和数据 var option = { title: { text: '常见问题', left: 'center' }, tooltip: { trigger: 'item' }, series: [ { name: '问题原因', type: 'pie', radius: '50%', data: [ {value: 1023, name: '解约失败'}, {value: 735, name: '等待银行扣款结果中'}, {value: 580, name: '解锁失败'}, {value: 484, name: '接口数据错误'}, {value: 300, name: '页面加载失败'} ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; let _this = this; //注意，要将this进行指代，否则在click里面this指向发生了改变 this.myChart.setOption(option); //点击事件 this.myChart.on('click',function(params){ _this.$alert(params, '问题详情', { confirmButtonText: '确定', dangerouslyUseHTMLString:true, callback: action => {} }); }); }, }click事件需要在draw时写入，否则不太好触发； 简单的饼图就实现了，主要是多看看echarts官网； 希望能帮到您，祝您生活愉快～ |
【本文地址】